<template>
  <el-drawer :title="title" :visible.sync="visible" append-to-body class="drawer-container" size="800px">
    <model-form ref="form" :id="id" :method="method" :visible="visible" @ok="handleSuccess"
                @error="loading = false"/>
    <div class="drawer-footer">
      <el-button size="mini" type="primary" :loading="loading" @click="handleSubmit">确定</el-button>
      <el-button size="mini" @click="handleCancel">取消</el-button>
    </div>
  </el-drawer>
</template>

<script>

import ModelForm from "./ModelForm";

export default {
  name: "UserModelCard",
  components: {ModelForm},
  data() {
    return {
      id: '',
      title: '',
      method: '',
      visible: false,
      loading: false
    }
  },
  created() {
  },
  methods: {
    add() {
      this.title = '创建用户'
      this.method = 'add'
      this.visible = true
    },
    edit(id) {
      this.id = id
      this.title = '修改用户'
      this.method = 'edit'
      this.visible = true
    },
    handleSubmit() {
      this.$refs.form.handleSubmit()
    },
    handleSuccess() {
      this.visible = false;
      this.$emit('ok')
      this.loading = false
    },
    handleCancel() {
      this.visible = false
      this.$emit('close')
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
